<!-- 角色管理 -->
<template>
  <div class="secondary">
    <div class="institutions">
      <i class="iconfont">&#xe62e;</i>
      <p class="tissue">角色管理</p>
      <!-- 搜索模块 -->
      <div class="secondary-query">
        <el-button type="primary" icon="el-icon-delete" size="mini" @click="Batchdelete">批量删除选内容</el-button>
        <el-input
          v-model="idmark"
          placeholder="输入名称"
          style="width:100px;"
          size="mini"
          @keyup.enter.native="search"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="Added" size="mini">新增角色</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      @select="selectionChange"
      @select-all="selectAll"
      style="width: 98%;margin-left: 1%;margin-top: 10px;"
    >
      <el-table-column type="selection" width="55" fixed align="center"></el-table-column>
      <el-table-column prop="name" label="角色" align="center"></el-table-column>
      <el-table-column prop="description" label="描述" align="center"></el-table-column>
      <el-table-column prop="adminCount" label="后台用户数量" width="180" align="center"></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
        :formatter="dateFormat"
      ></el-table-column>

      <el-table-column prop="status" label="状态" :formatter="stateFormat" align="center"></el-table-column>
      <el-table-column prop="sort" label="排序" width="100" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <div class="user-icon">
            <span class="editor">
              <i class="iconfont" title="编辑" @click="handleEdit(scope.$index, scope.row)">&#xe600;</i>
            </span>
            <span class="delete">
              <i class="iconfont" title="删除" @click="handleDelete(scope.$index, scope.row)">&#xe601;</i>
            </span>
            <span class="power">
              <i class="iconfont" title="修改权限" @click="potence(scope.$index, scope.row)">&#xe604;</i>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    const generateData = _ => {
      const data = [];
      const cities = [];
      const pinyin = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "nanjing",
        "xian",
        "chengdu"
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      console.log("data: " + JSON.stringify(data));
      return data;
    };
    return {
      idmark: "", //id
      name: "", // 姓名
      tableData: [], // 权限管理表格
      loading: true,
      list_id: [],
      selected: false,
      selected_all: 0
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 表格数据
    secondarydata() {
      this.$store
        .dispatch("Secondary")
        .then(data => {
          this.tableData = data;
          this.loading = false;
        })
        .catch(error => {
          console.log("请求失败：" + error);
        });
    },
    // 用描述进行搜索
    search() {
      var select = {
        keyword: this.idmark
      };
      this.$store
        .dispatch("Batchdselect", select)
        .then(data => {
          this.tableData = data;
          this.loading = false;
        })
        .catch(error => {
          console.log("请求失败：" + error);
        });
    },
    // 批量删除所选内容
    Batchdelete() {
      if (this.selected_all == 0) {
        console.log(this.selected_all);
        this.$message({
          message: "你还没有全部勾选，请勾选全部",
          type: "warning"
        });
      } else {
        console.log(this.selected_all);
        this.$confirm("确定要全部删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: false
        })
          .then(() => {
            var batch = this.list_id;
            this.$store.dispatch("Batchdelete", batch).then(data => {
              this.secondarydata();
            });
            this.$notify({
              title: "删除成功",
              message: "你已成功删除全部的用户信息",
              type: "success"
            });
          })
          .catch(() => {
            this.$notify.info({
              title: "已取消删除",
              message: "你已取消删除全部的用户信息"
            });
          });
      }
      console.log("list: " + this.list_id);
    },
    // 全选
    selectAll(selection) {
      selection.forEach(element => {
        let sujets;
        sujets = element.id;
        if (this.list_id.indexOf(sujets) == -1) {
          this.list_id.push(sujets);
        }
        this.selected_all = this.list_id.length;
      });
    },
    // 单选
    selectionChange(selection, row) {
      selection.forEach(tiem => {
        let sujet;
        sujet = tiem.id;
        if (this.list_id.indexOf(sujet) == -1) {
          this.list_id.push(sujet);
        }
        console.log("*//: " + this.list_id);
        this.selected_all = this.list_id.length;
      });
      this.selected = selection.length && selection.indexOf(row) !== -1;
    },
    // 单个删除操作
    handleDelete(index, row) {
      if (this.selected == 0) {
        this.$message({
          message: "你还没有勾选任意一项，请勾选",
          type: "warning"
        });
      } else if (this.selected == true) {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: false
        })
          .then(() => {
            // row.splice(index, 1);
            var batch = this.list_id;
            this.$store.dispatch("Batchdelete", batch).then(data => {
              this.secondarydata();
            });
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 新增用户角色
    Added() {
      this.$router.push({ name: "new_role" });
    },
    // 编辑用户权限操作
    handleEdit(index, row) {
      this.$router.push({
        name: "new_modify",
        query: { id: row.id, name: row.name }
      });
    },
    // 修改权限
    potence(index, row) {
      this.$router.push({
        name: "modification",
        query: { id: row.id, name: row.description }
      });
    },
    //判断账号状态
    stateFormat(row, column) {
      // console.log(row.status);
      if (row.status == 0) {
        return "禁用";
      } else if (row.status == 1) {
        return "启用";
      }
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    }
  },
  created() {
    this.secondarydata();
  },
  mounted() {}
};
</script>
<style scoped>
.secondary {
  margin-top: 20px;
}
.institutions {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.tissue {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.secondary-query {
  position: absolute;
  right: 20px;
  top: 10px;
}
.user-icon {
  display: flex;
  justify-content: center;
}
.editor > .iconfont {
  cursor: pointer;
  color: #62c45e;
  margin-right: 10px;
}
.delete > .iconfont {
  cursor: pointer;
  color: #eb4a4a;
  margin-right: 10px;
}
.power > .iconfont {
  cursor: pointer;
}
.haidun-secondary {
  text-align: left;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>